<script setup>

import {ref} from "vue";
import axios from "axios";

let input = ref('');
let tableData = ref([]);

let pageNum = ref(1);
let pageSize = ref(5);
let total = ref(0);


const size = ref('default');
const multipleSelection =ref([])
//编辑
const replyDialogVisible = ref(false);//弹出框的显示
const replyContent = ref('');//回复内容
const currentReplyRow = ref(null);
let title = ref('');

//添加
const add = ref(false);
const addContent = ref('');
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
}
//展示数据
const Sort = async ()=>{
  try {
    const param={
      pageNum:pageNum.value,
      pageSize:pageSize.value,
      type:input.value
    }
    const response = await axios.get("/api/hdx/selectType",{
      params:param
    });
    console.log("============")
    console.log(response.data.data)
    const pageInfo = response.data.data;
    tableData.value = pageInfo.list;
    total = pageInfo.total;
    pageNum.value = pageInfo.pageNum;
    pageSize.value = pageInfo.pageSize
  }catch (error){
    console.log(error);
  }
}
Sort();

const handleSizeChange = ()=>{
  Sort();
}

const handleCurrentChange = ()=>{
  Sort();
}
//查询数据
function searchSort(){
  Sort();
}
//删除单个数据
async function removeSort(id) {
  const confirmDelete = window.confirm('确定要删除该记录吗？');
  if (confirmDelete) {
    const remove = async () => {
      try {
        const response = await axios.delete(`/api/hdx/deleteType/${id}`);
        console.log(response.data);
      } catch (error) {
        console.log(error)
      }
    }
    await remove();
    Sort();
  }
}
//批量删除
async function deleteBatch() {
  const confirmDelete = window.confirm('确定要删除所选记录吗？');
  if (confirmDelete) {
    const remove = async () => {
      //将多选选中的多行数据的id数组，传递给ids
      const ids = multipleSelection.value.map(item => item.id);
      try {
        const response = await axios.delete("/api/hdx/BatchType", {
          data: ids
        });
        console.log(response.data)
      } catch (error) {
        console.log(error)
      }
    }
    await remove();
    Sort();
  }
}
//编辑
function editSort(row){
  title.value = "编辑收费类型"
  replyDialogVisible.value=true;
  currentReplyRow.value = row;
  replyContent.value = row.type;
}
function closeReplyDialog(){
  title.value = '';
  replyDialogVisible.value = false;
  replyContent.value = '';
  currentReplyRow.value = null;
}
async function submitReply(){
  const update = async ()=>{
    try{
      const param ={
        id:currentReplyRow.value.id,
        type:replyContent.value
      }
      //更新数据库数据
      await axios.get("/api/hdx/updateType",{
        params:param
      });
    }catch (error){
      console.log(error);
    }
  }
  await update()
  Sort();
  closeReplyDialog();
}


//添加一行数据
function insertSort(){
  title.value = "添加收费类型"
  add.value=true;
}
function close(){
  title.value = '';
  add.value=false;
  addContent.value=''
}

async function submit(){
  const addSort = async ()=>{
    try {
      await axios.post("/api/hdx/insertType",{
        type:addContent.value
      });
    }catch (error){
      console.log(error);
    }
  }
  await addSort();
  Sort();
  close();
}
</script>

<template>

  <div style="margin-left: 15px">
    <div style="padding: 10px 0;border-bottom: solid 1px #cccccc; border-top: solid 1px #cccccc">
      <text style="font-weight: 600">首页</text> / 师资管理 / 收费分类管理
    </div>
    <div style="margin: 15px 0;display: flex">
      <el-input v-model="input" style="width: 240px" placeholder="请输入收费类型" clearable/>
      <div style="position: relative;left: 10px">
        <el-button type="primary" @click="searchSort">搜索</el-button>
        <el-button type="primary" @click="insertSort">添加</el-button>
        <el-button type="danger" @click="deleteBatch">批量删除</el-button>
      </div>
    </div>
    <el-table :data="tableData"
              border
              style="width: 100%"
              ref="multipleTableRef"
              row-key="id"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" align="center"/>
      <el-table-column prop="type" label="收费类型" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default = "scope">
          <el-button
              type="primary"
              @click="editSort(scope.row)"
          >编辑</el-button>
          <el-button
              type="danger"
              @click="removeSort(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <el-dialog
      v-model="replyDialogVisible"
      :title="title"
      @close="closeReplyDialog"
  >
    <el-input
        v-model="replyContent"
        type="textarea"
        placeholder="请输入收费类型"
        autosize
    />
    <template #footer>
        <span>
          <el-button @click="closeReplyDialog">取消</el-button>
          <el-button
              type="primary"
              @click="submitReply"
          >确定</el-button>
        </span>
    </template>
  </el-dialog>

  <el-dialog
      v-model="add"
      :title="title"
      @close="close"
  >
    <el-input
        v-model="addContent"
        type="textarea"
        placeholder="请输入收费类型"
        autosize
    />
    <template #footer>
        <span>
          <el-button @click="close">取消</el-button>
          <el-button
              type="primary"
              @click="submit"
          >确定</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>